{% extends "layout.html" %}

{% load static %}
{% block css %}
    <link href="{% static '/plugins/bootstrap-4.6.2-dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block content %}
<div class="container">
    <h1>添加员工</h1>
</div>
<div class="container">
    <form class="form" method="post">
        {% csrf_token %}
        <div class="form-row">
            <div class="form-group col-md-6">
                <label  for="name">姓名</label>
                <input type="text" class="form-control " style="width: 80%" name="name" id="name">
            </div>

            <div class="col">
                <label for="password">密码</label>
                <input type="text" class="form-control " style="width: 80%" name="password" id="password">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label  for="depart">部门</label>
{#                <input type="text" class="form-control" style="width: 80%" name="depart" id="depart">#}
                <select class="form-control" style="width: 80%" name="depart" id="depart">
                    {% for item in depart %}
                        <option value="{{ item.id }}">{{ item.title }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col">
                <label  for="create_date">入职时间</label>
                <input type="date" class="form-control " style="width: 80%" name="create_date" id="create_date">
            </div>
        </div>
        <div class="form-row">
         <div class="form-group col-md-4">
                <label  for="age">年龄</label>
                <input type="text" class="form-control " style="width: 80%" name="age" id="age">
            </div>
            <div class="col">
                <label  for="gender">性别</label>
{#                <input type="text" class="form-control " style="width: 80%" name="gender" id="gender">#}
                <select name="gender" id="gender" class="form-control " style="width: 80%">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <div class="col">
                <label  for="account">账户余额</label>
                <input type="text" class="form-control " style="width: 80%" name="account" id="account" placeholder="">
            </div>
        </div>
        <div class="form-group col-md-6">
            <button type="submit" class="btn btn-primary btn-sm ">提交</button>
        </div>
    </form>
</div>
{% endblock %}
{% block js %}
    <script src="{% static '/js/moment-with-locales.min.js' %}"></script>
    <script src="{% static '/plugins/bootstrap-4.6.2-dist/js/bootstrap-datepicker.min.js' %}"></script>
    <!--中文语言包扩展-->
    <script src="{% static '/plugins/bootstrap-4.6.2-dist/js/bootstrap-datepicker.zh-CN.js' %}"></script>
    <script>
        $('#create_date').datepicker({
            format: "yyyy-mm-dd",
            weekStart: 1,
            daysOfWeekHighlighted: "6,0",
            autoclose: true,
            todayHighlight: true,
            language: "zh-CN",
        });

    </script>
{% endblock %}